<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" media="screen" href="styles/core.css">
	<script type="text/javascript" src="scripts/p.js"></script>
	<script type="text/javascript" src="scripts/core.js"></script>
</head>
<body>

	<div class="header clearfix">
		<div class="left logo"><img src="/images/em-logo-48.png" /></div>
		<div class="left">
			<h1>Calculator</h1>
			<h3>Convert PX to EM. Simple.</h3>
		</div>
	</div>
	
	<div class="main" id="oMainPage">
		<div class="clearfix">
			<div class="column right em">
				<label for="oEM"><h3>EM</h3></label>
				<input type="text" value="2em" id="oEM" />
			</div>
			<div class="column left">
				<label for="oPX"><h3>PX</h3></label>
				<input type="text" value="24px" id="oPX" />
			</div>
			<div class="column left">
				<label for="oBase"><h3>Base size (px)</h3></label>
				<input type="text" value="12px" id="oBase" />
			</div>
		</div>
		<div class="options clearfix">
			<div class="right"><a href="#" id="oAboutShow">About</a></div>
			<div class="right" style="margin-right: 1em;"><a href="#" id="oInspectShow">Inspect Current Page</a></div>
			<a href="#" id="oSetDefault">Set as default values &raquo;</a>
		</div>
	</div>
	
	<div class="main about" style="display: none;" id="oAboutPage">
		<h2>About the EM Calculator</h2>
		<p>A simple to use PX to EM converter within Chrome.</p>
		<p>Services I used before I built this, and ultimately the inspiration behind this tool: <a href="http://pxtoem.com/" target="_blank">http://pxtoem.com/</a> and <a href="http://riddle.pl/emcalc/" target="_blank">http://riddle.pl/emcalc/</a>.
		<p>To let me know if you encounter any bug/issues or if you have any ideas to improve the extension drop me an email at: <a href="mailto:james.haley@sevendigits.com">james.haley@sevendigits.com</a> or a tweet: <a href="http://twitter.com/sparkyfied" target="_blank">twitter.com/sparkyfied</a>.</p>

		
		<div class="options clearfix">
			<div class="right"><a href="#" id="oAboutClose">Back to calculator &raquo;</a></div>
		</div>
	</div>
	
</body>
</html>